<template>
  <div id="header">
    <el-header height="auto">
      <!-- 头部 -->
      <div class="header">
        <div class="header-content">
          <!-- type="flex" 可以实现栅格 -->
          <el-row :gutter="0" type="flex">
            <!-- logo -->
            <el-col :span="6" :offset="2">
              <!-- 使用背景图片实现 -->
              <router-link to="/" class="logo"> </router-link>
            </el-col>
            <!-- 空白部分 -->
            <el-col :span="8"></el-col>
            <!-- 登陆后显示的内容 用户名 用户头像 发布退出登录 后面在做 -->
            <el-col :span="6" class="avatar-box align-right" v-if="isLogin">
              <router-link :to="{ name: 'user-space' }">
                <el-avatar
                  style="vertical-align: middle"
                  shape="square"
                  size="medium"
                  :src="userInfo.avatar"
                ></el-avatar>
              </router-link>
              <router-link :to="{ name: 'user-space' }" class="text login">
                {{ userInfo.name }}
              </router-link>
              <router-link :to="{ name: 'create' }" class="text login">
                <el-button type="primary" size="mini">发布菜谱</el-button>
              </router-link>
              <router-link to="" class="text">
                <el-button type="danger" size="mini" @click="logout"
                  >退出</el-button
                >
              </router-link>
            </el-col>
            <!-- 登录和注册按钮 -->
            <el-col :span="6" class="align-right" v-else>
              <router-link to="/login" class="text login">登录</router-link>
              <router-link to="/login" class="text register">注册</router-link>
            </el-col>
            <el-col :span="2"></el-col>
          </el-row>
        </div>
      </div>

      <!-- 导航菜单 复制粘贴-->
      <nav>
        <div class="nav-content">
          <!-- 导航 -->
          <header_menu></header_menu>
        </div>
      </nav>
    </el-header>
  </div>
</template>

<script>
import header_menu from "./Header-menu.vue";
import { loginOut } from "@/apis/user.js";
export default {
  name: "Header",
  // 注册组件
  components: { header_menu },
  computed: {
    isLogin() {
      return this.$store.getters.isLogin;
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  methods: {
    // 点击按钮退出登录
    logout() {
      this.$confirm("真的要退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 点击确定执行的程序
          // 在服务器中退出
          await loginOut();
          // 删除本地token
          localStorage.removeItem("token");
          // 跳转至首页
          location.href = "/";
        })
        .catch((err) => {
          // 点击取消执行的程序
          console.log(err);
        });
    },
  },
};
</script>
 
<style lang="stylus" scoped>
.header {
  height: 80px;
  background-color: #c90000;

  .logo {
    display: block;
    height: 80px;
    width: 184px;
    background: url('../assets/images/catelogo.png') no-repeat left center;
    background-size: 60%;
  }

  .text {
    margin-left: 10px;
    color: #fff;
    line-height: 80px;
  }

  .avatar-box {
    // line-height: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    // .el-button {
    // background: none;
    // border: none;
    // font-size: 16px;
    // }
    a {
      margin: 0 5px;
      color: #fff;
    }
  }

  .align-right {
    text-align: right;
    padding-right: 20px;
  }
}

nav {
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);

  .nav-content {
    width: 1200px;
    margin: 0 auto;

    .el-menu-item {
      a {
        display: block;
        height: 100%;
      }
    }
  }
}
</style>